<template>
	<view class="full-screen flex-col">
		<view class="relative h-full overflow-auto flex-col">
			<slot></slot>
		</view>
		<view ref="tabbar" class="flex-shrink tabbar flex item-center" :class="tabs.length===5?'clip-bg':'uni-bg-white'" :style="tabbarStyle">
			<block v-for="(item,index) in tabs" :key="index">
				<view v-if="item.midBtn" class="mid-btn" @click="onTabBarMidButtonTap(item, index)">
					<view class="mid-btn-icon">
						<view class="half-border"></view>
						<image class="size-44" style="border-radius:50%;" :src="current === index ? item.iconSelect : item.icon"></image>
					</view>
					<text class="tab-text fs-10 text-color-hint mt-5" :style="`color:${current == index ? selectcolor : color}`">{{item.text}}</text>
				</view>
				<view v-else class="flex-1 flex-col center relative" @click="onTabClick(item, index)">
					<image class="size-24" :src="current === index ? item.iconSelect : item.icon"></image>
					<text class="fs-10 text-color-hint mt-5" :style="`color:${current == index ? selectcolor : color}`">{{item.text}}</text>
					<view v-if="item.mark" class="absolute size-10 radius-12 bg-primary" style="top:0;transform:translateX(10px);"></view>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	const props = defineProps({
		tabs: {
			type: Array,
			default: []
		},
		current: {
			type: Number,
			default: 0
		},
		color: {
			type: String,
			default: 'rgba(51, 51, 51, 0.60)'
		},
		selectcolor: {
			type: String,
			default: '#FA4543'
		}
	})
	
	const emits = defineEmits(['onTabClick', 'onTabMidButtonClick'])
	
	const tabbar = ref(null)
	
	const tabbarStyle = computed(() => {
		return {
			'height': `calc(60px + ${safeAreaBottom.value}px)`,
			'padding-bottom': `${safeAreaBottom.value}px`
		}
	})
	
	const onTabClick = (tab, index) => {
		emits('onTabClick', {tab, index})
	}
	const onTabBarMidButtonTap = (tab, index) => {
		emits('onTabMidButtonClick', {tab, index})
	}
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
</script>

<style lang="scss">
	.clip-bg {
		background-image: url('tab.svg');
	}
	.tabbar {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.mid-btn {
		flex: 1;
		width: 0;
		display: inline-flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		
		.tab-text {
			transform: translateY(13px);
		}
	}
	.mid-btn-icon {
		--w: 64px;
		--b: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -32px;
		width: var(--w);
		height: var(--w);
		border-radius: 50%;
		
		.half-border {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50%;
			border-radius: 0 0 var(--w) var(--w);
			overflow: hidden;
		}
	}
</style>